<template>
    <div class="home-wrapper">
        <div class="home-frame home-wrapper">
            <div class="flex-frame">
                <div class="graph-card"
                     v-for="(graph,index) in graphList"
                     :key="index"
                     :id="index"
                     @click="toGraphPage"
                >
                    <i class="el-icon-close close-btn"
                       @click="openConfirm">
                    </i>
                    <el-image class="card-image"
                              :src="graph.url?graph.url:require(`../../public/img/graph.jpg`)"
                              fit="fill"
                    >
                    </el-image>
                    <div class="card-description">
                        <span>{{graph.name}}</span>
                        <div class="icon-wrapper">
                            <i class="el-icon-star-off"
                               @click="starIt">
                            </i>
                        </div>
                    </div>
                </div>
                <div class="graph-card add-card"
                     @click="createKG">
                    <i class="el-icon-plus"></i>
                </div>
            </div>
            <div class="tool-bar">
                <el-input class="search-input"
                          size="small"
                          placeholder="输入图表名"
                          prefix-icon="el-icon-search"
                          v-model="searchContent"
                          clearable="clearable"
                >
                    <el-button slot="append" @click="searchGraph">搜索</el-button>
                    <el-button v-if="hadSearch" slot="append" @click="resetSearch">重置</el-button>
                </el-input>
            </div>
        </div>
        <el-dialog :visible.sync="confirmToDelete"
                   title="提示"
                   width="20%"
                   :center="true">
            <div class="dialog-content">确定要删除图表吗？</div>
            <div slot="footer" class="dialog-footer">
                <el-button type="success"
                           @click="deleteGraphById"
                           icon="el-icon-check"
                           size="mini"
                           round>
                </el-button>
                <el-button type="danger"
                           @click="confirmToDelete = false"
                           icon="el-icon-close"
                           size="mini"
                           round>
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import d3ClassGetter from "../assets/javascript/d3ClassGetter";

    export default {
        name: "homePage",
        data() {
            return {
                graphList: [],
                graphListBackup: [],
                confirmToDelete: false,
                currentSelected: -1,
                searchContent: "",
                hadSearch: false
            };
        },
        mounted() {
            d3ClassGetter.title.message = "主界面";
            d3ClassGetter.title.back = false;
            d3ClassGetter.title.isGraph = false;
            this.getGraphList();
        },
        methods: {
            ...mapActions([
                "getAllGraph",
                "addGraph",
                "deleteGraph"
            ]),
            getGraphList() {
                this.getAllGraph().then((result) => {
                    this.graphList = result.data;
                    this.graphListBackup = result.data;
                });
            },
            starIt(event) {
                event.target.className = event.target.className === "el-icon-star-off" ? "el-icon-star-on" : "el-icon-star-off";
            },
            openConfirm(event) {
                event.stopPropagation();
                this.currentSelected = event.target.parentNode.getAttribute("id");
                this.confirmToDelete = true;
            },
            deleteGraphById() {
                let graphId = this.graphList[this.currentSelected].id;
                this.graphList.splice(this.currentSelected, 1);
                this.confirmToDelete = false;
                this.deleteGraph(graphId);
            },
            createKG() {
                this.addGraph("新图谱").then((result) => {
                    this.graphList.push({
                        id: result,
                        url: "",
                        name: "新图谱"
                    });
                });
            },
            searchGraph() {
                this.graphList = [];
                for (let graph of this.graphListBackup) {
                    if (graph.name.match(".*" + this.searchContent + ".*")) {
                        this.graphList.push(graph);
                    }
                }
                this.hadSearch = true;
                this.$message.success("搜索完成");
            },
            resetSearch() {
                this.graphList = this.graphListBackup;
                this.hadSearch = false;
            },
            toGraphPage(event) {
                let index = event.target.parentNode.parentNode.id;
                let gId = this.graphList[index].id;
                let gName = this.graphList[index].name;
                this.$router.push({
                    name: "templateBench",
                    params: {graphId: gId}
                });
                d3ClassGetter.title.message = gName;
                d3ClassGetter.title.back = true;
                d3ClassGetter.title.isGraph = true;
            }
        }
    };
</script>

<style scoped>
    @import "../assets/styles/homePage.css";
</style>